<template>
    <!-- 资产排行 -->
    <div class="content content-1">
        <!-- 资产排行标题 -->
        <div class="content-header">
            <div class="content-header-title">{{ baseData.startPageTitle.leftOne }}</div>
        </div>
        <!-- 资产排行副标题切换按钮 -->
        <div class="content-wrap" @click="handleTabClick">
            <div class="subject-intelligent-ctrl">
                <div class="tab-bar-item " :class="{ active: toggleOwnNumber === 1 }" @click="toggleHandleOne">量化分级
                </div>
                <div class="tab-bar-item " :class="{ active: toggleOwnNumber === 2 }" @click="toggleHandleTwo">数字台账
                </div>
                <!-- <div class="tab-bar-item " :class="{ active: toggleOwnNumber === 3 }" @click="toggleHandleThree">人员管理
                </div> -->
            </div>
            <!-- 切换后的内容 -->
            <div class="table-content">
                <component :is="currentComponent" />
            </div>
        </div>
    </div>
    <!-- 分类总览 -->
    <div class="content content-2">
        <div class="content-header">
            <div class="content-header-title">{{ baseData.startPageTitle.leftTwo }}</div>
        </div>
        <div class="content-wrap">
            <div class="wrap-item">
                <cateBarChart />
            </div>
        </div>
    </div>
    <!-- 资产分布 -->
    <div class="content content-3">
        <div class="content-header">
            <div class="content-header-title">{{ baseData.startPageTitle.leftThree }}</div>
            <div class="content-more" @click="handleToAssetDistribute">查看更多</div>
        </div>
        <!-- 资产分布视频 未解除硬编码 --> 
        <div class="content-wrap video-container">
            <div class="video-item">
                <video src="@/assets/video/1.mp4" controls loop autoplay="autoplay" muted="muted"></video>
            </div>
            <div class="video-item">
                <video src="@/assets/video/2.mp4" controls loop autoplay="autoplay" muted="muted"></video>
            </div>
            <div class="video-item">
                <video src="@/assets/video/3.mp4" controls loop autoplay="autoplay" muted="muted"></video>
            </div>
            <div class="video-item">
                <video src="@/assets/video/4.mp4" controls loop autoplay="autoplay" muted="muted"></video>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, shallowRef } from "vue";
import baseData from "@/utils/baseData.js";
import cateBarChart from "@/view/home/AppendCharts/cateBarChart/index.vue";
import leftOne from "@/view/home/left/leftOne/index.vue"
import leftTwo from "@/view/home/left/leftTwo/index.vue"
import { useRouter } from "vue-router";

const router = useRouter();

const currentComponent = shallowRef(leftOne);
//排行切换
const toggleOwnNumber = ref(1);


const toggleHandleOne = () => {
    toggleOwnNumber.value = 1;
    currentComponent.value = leftOne;
}
const toggleHandleTwo = () => {
    toggleOwnNumber.value = 2;
    currentComponent.value = leftTwo;
}


// 资产分布跳转
function handleToAssetDistribute() {
    router.push({ name: "assetDistributePage" });
}

</script>
<style scoped>
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.content .content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content .content-header .content-header-title {
    width: 10.416667vw;
    height: 1.666667vw;
    line-height: 1.25vw;
    padding-left: 0.520833vw;
    font-size: 1.25vw;
    font-family: homeTime;
    color: #fff;
    text-align: left;
    text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
    letter-spacing: 0.104167vw;
    background: url("@/assets/home/titleBase.png") 0 0 no-repeat;
    background-size: 100% 100%;
}

.content .content-wrap {
    width: 100%;
    flex: 1;
    padding: 0.3vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.content-wrap .subject-intelligent-ctrl {
    display: flex;
    align-items: center;
}

.subject-intelligent-ctrl .tab-bar-item {
    width: 4.6875vw;
    height: 1.25vw;
    color: #7dacc2;
    font-size: 0.833333vw;
    border: 1px solid rgba(58, 178, 231, 0.3);
    text-align: center;
    cursor: pointer;
}


.table-content {
    display: flex;
    width: 100%;
    height: 50%;
    padding-top: 1vw;
    justify-content: space-between;
}

.table-content-item {
    flex-basis: 33%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #e6f7ff;
    font-family: homeTime;
    font-size: 1.3vw;
}

.table-content-item .table-content-item-label {
    margin-bottom: 2vw;
}

.table-content-item .table-content-item-value {
    font-size: 1vw;
}

.table-content-item .table-content-item-value span.desc {
    color: #54e5fc;
}

.content-wrap.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 19vw;
}

.video-item {
    color: #fff;
    width: calc(50% - 0.3vw);
    height: calc(50% - 0.3vw);
}

.video-item video {
    width: 100%;
    object-fit: fill;
    height: 100%;
    display: block;
}

.content .content-header .content-more {
    padding-right: 1.145833vw;
    font-size: 0.729167vw;
    color: #54e5fc;
    background: url("@/assets/home/gobtnicon.png") 100% no-repeat;
    background-size: 1.041667vw 0.9375vw;
    cursor: pointer;
}

.content-2 {
    flex: 2;
}

.content-2 .content-wrap {
    height: 100%;
}

.wrap-item {
    width: 100%;
    height: 10vw;
}

.active {
    background: url("@/assets/tab.png") no-repeat;
    background-position: center;
    background-size: cover;
    color: #38d1e9;
}
</style>